<template>
	<view class="content mainpadding">
		<view class="mainpadding border2 ffffff margin_bottom3 positionr" v-for="item in orderInfo.goods"
			:key="item.id">
			<view class="flexleft">
				<view class="goodsImg margin_right3">
					<image :src="item.logoimage" mode=""></image>
				</view>
				<view class="number">{{item.salename}}</view>
				<view class="flex1 justify_between_column" style="height: 157rpx;">
					<view class="text_a color_san">{{item.goods_name}}</view>
					<view class="text_b color_six margin_top1">尺寸：{{item.wei}}*{{item.hei}} {{item.formulacount}}{{item.size}}</view>
					<view class="text_b color_six" v-if="item.spunatname">規格：{{item.spunatname}}</view>
					<view class="flexbetween">
						<view class="price">${{item.price}}</view>
						<view class="text_six color_orange">x{{item.num}}</view>
					</view>
				</view>
			</view>
			<view class="flexright margin_top padding_top3 line_top">
				<view class="flexleft margin_right3" @click="editGoods(item)">
					<u-icon name="edit-pen" class="margin_right1" color="#777" size="18"></u-icon>
					<view class="text_b color_san">編輯</view>
				</view>
				<view class="flexleft" @click="removeOrder(item.id)">
					<u-icon name="trash" class="margin_right1" color="#777" size="18"></u-icon>
					<view class="text_b color_san">刪除</view>
				</view>
			</view>
		</view>
		<view class="mainpadding margin_top ffffff border2">
			<view class="text_w color_ling">備注</view>
			<textarea class="textareas text_five margin_top" placeholder-style="font-size: 26rpx;color: #999999;"
				cols="30" rows="10" placeholder="請輸入備注信息"></textarea>
		</view>
		<!-- 底部 -->
		<view class="footerBox">
			<view class="footerPirce flexbetween">
				<view class="flexleft paddingtb padding_left3">
					<!-- <view class="cart margin_right3">
						<view class="num">10</view>
					</view>
					<view class="line_r margin_right2"></view> -->
					<view>
						<text class="color_ling text_d">合計：</text>
						<text class="totalPrice">$</text>
						<text class="totalPrice" style="font-size: 36rpx;">{{orderInfo.money}}</text>
					</view>
				</view>
				<view class="flexleft">
					<view class="copy" @click="backpage">複製</view>
					<view class="settlement" @click="goCart">確定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shop_id: uni.getStorageSync("shop_id"),
				orderInfo: {}
			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			backpage(){
				uni.navigateBack(1)
			},
			async getList() { //訂單詳情
				let _this = this
				let res = await this.http.request('/api/goods/listordergoods', 'POST', {
					shop_id: this.shop_id
				})
				if (res.code == 1) {
					res.data.goods.forEach(item => {
						item.logoimage = this.imgUrl + item.logoimage
					})
					this.orderInfo = res.data
					console.log(this.orderInfo);
				} else if (res.code == 0) {
					// this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
			editGoods(item) { //編輯訂單商品
				if (item.type == 0) {
					uni.navigateTo({
						url: "/pages_index/goodsInfoEdit?msg=" + encodeURIComponent(JSON.stringify(item))
					})
				} else {
					uni.navigateTo({
						url: "/pages_index/goodsInfoEditSecond?msg=" + encodeURIComponent(JSON.stringify(item))
					})
				}
			},
			async removeOrder(id) { //刪除訂單商品
				let _this = this
				let res = await this.http.request('/api/goods/delordergoods', 'POST', {
					id,
					goodsorder_id:this.orderInfo.id
				})
				if (res.code == 1) {
					this.http.toast("刪除成功！")
					this.getList()
					// let index = this.orderInfo.goods.findIndex(item => {
					// 	return id == item.id
					// })
					// this.orderInfo.goods.splice(index, 1)
				} else if (res.code == 0) {
					this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
			async goCart() { //加入購物車
				let _this = this
				let res = await this.http.request('/api/goods/addbuycar', 'POST', {
					shop_id: this.shop_id,
					goods_order_id: this.orderInfo.id
				})
				if (res.code == 1) {
					this.http.toast("加入購物車成功！")
					setTimeout(() => {
						uni.redirectTo({
							url: "./cart"
						})
					}, 500)
				} else if (res.code == 0) {
					this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-bottom: 180rpx;
	}

	.goodsImg {
		width: 157rpx;
		height: 157rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
			border-radius: 14rpx;
		}

	}

	.number {
		padding: 5rpx 30rpx;
		background: rgba(255, 133, 5, 0.1);
		border-radius: 0rpx 14rpx 0rpx 14rpx;
		position: absolute;
		top: 0;
		right: 0;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF8505;
	}

	.freeBox {
		width: 75rpx;
		height: 41rpx;
		line-height: 41rpx;
		text-align: center;
		background: rgba(255, 133, 5, .1);
		border-radius: 3rpx 3rpx 3rpx 3rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF8505;
	}

	.price {
		font-size: 30rpx;
		font-family: DIN Next LT Pro-Bold, DIN Next LT Pro;
		font-weight: bold;
		color: #FF5C00;
	}

	.textareas {
		width: 100%;
		box-sizing: border-box;
		height: 203rpx;
		// padding: 30rpx;
		border-radius: 8rpx;
		// border: 2rpx solid #EFEFEF;
	}

	// 底部
	.footerBox {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom: 40rpx;

		.footerPirce {
			width: 708rpx;
			height: 101rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 53rpx 53rpx 53rpx 53rpx;
		}

		.cart {
			width: 40.5rpx;
			height: 42.58rpx;
			background-image: url("@/static/images/index/cart_num.png");
			background-size: 100% 100%;
			position: relative;
		}

		.num {
			width: 35rpx;
			height: 35rpx;
			line-height: 35rpx;
			text-align: center;
			background: #FF5C00;
			border-radius: 50%;
			position: absolute;
			right: -20rpx;
			top: -20rpx;
			font-size: 17rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}

		.line_r {
			width: 0;
			height: 42rpx;
			border-right: 2rpx dashed rgba(0, 0, 0, 1);
		}

		.totalPrice {
			font-size: 26rpx;
			font-family: DIN Next LT Pro-Medium;
			font-weight: 500;
			color: rgba(253, 70, 62, 1);
		}

		.copy {
			width: 145rpx;
			height: 101rpx;
			line-height: 101rpx;
			text-align: center;
			background: #FF8505;
			border-radius: 53rpx 0 0 53rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #ffffff;
		}

		.settlement {
			width: 145rpx;
			height: 101rpx;
			line-height: 101rpx;
			text-align: center;
			background: #FFB800;
			border-radius: 0rpx 53rpx 53rpx 0rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
		}
	}
</style>